<template>
    <div class="home">
      <nav-bar></nav-bar>
      <van-tabs v-model="active" sticky>
        <van-tab v-for="(item,index) in category" :key="index" :title="item.title">
          <van-list
            v-model="item.loading"
            :finished="item.finished"
            finished-text="没有更多了"
            :immediate-check="false"
            @load="onLoad"
          >
            <div class="detailparent">
              <cover class="detailitem" :detailitem="categoryitem" v-for="(categoryitem,categoryindex) in item.list" :key="categoryindex"></cover>
            </div>
          </van-list>
        </van-tab>
      </van-tabs>
    </div>
</template>

<script>
  import NavBar from '../components/common/Navbar'
  import cover from './cover'
    export default {
    components:{
      NavBar,
      cover
    },
        name: "Home",
        data() {
            return {
              category:[],
              active:0
            }
        },
        methods: {
           async selectCategory(){
             const res = await this.$http.get('/category')
               this.changeCategory(res.data)
              // this.category = res.data
          },
          changeCategory(data){
             // .map方法可以直接添加或者修改数组中的数组
             const category1 = data.map((item,index) =>{
               item.list = []
               item.page = 0
               //向每个对象中添加懒加载的finished及loading 默认false
               item.finished = false
               item.loading = false

               item.pagesize = 10
               return item;
             })
              console.log(category1)
            this.category = category1
            this.selectArticle()
          },
          async selectArticle(){
            const categoryitem = this.categoryitem()
            const res = await this.$http.get('/detail/' + categoryitem._id,{
              params:{
                page:categoryitem.page,
                pagesize:categoryitem.pagesize
              }
            })
              setTimeout(() =>{
                categoryitem.list.push(...res.data)
                categoryitem.loading = false
                // console.log(categoryitem.list)
                //  由于数据实在太多了，只能强制数据全部加载完成
                if (categoryitem.list.length >= 40) {
                  categoryitem.finished = true;
                }
              },1000)
          },
          categoryitem(){
             const categoryitem = this.category[this.active]
            return categoryitem
          },
          //调用懒加载的方法
          onLoad(){
             const categoryitem = this.categoryitem()
            console.log(categoryitem)
            categoryitem.page +=1
            this.selectArticle()
          }
        },
      watch:{
        active(){
          this.selectArticle()
        }
      },
      created() {
        this.selectCategory()
      }
    }
</script>

<style scoped lang="less">
  .home{
    background-color: white;
  }
  .detailparent{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    .detailitem{
      width: 45%;
    }
  }
</style>
